<template>
	<div class="count-info">
		<div class="ci-left">
			<div class="tab-title">待料数量（总）</div>
			<div class="tab-content">{{waitMatTotal}}</div>
		</div>
		<div class="ci-middle">
			 <div class="haschecked-day">
			 	  <div class="tab-title">已检数量（当日）</div>
			 	  <div class="haschecked-day-group">
			 	  	    <div class="tab-title">合格</div>
			 	  	    <div class="tab-content">{{checkedDayQua}}</div>
			 	  	    <div class="tab-title">不合格</div>
			 	  	    <div class="tab-content-red">{{checkedDayUnq}}</div>
			 	  </div>
			 </div>
			 <div class="haschecked-month">
			 	  <div class="tab-title">已检数量（当日）</div>
			 	  <div class="haschecked-month-group">
			 	  	    <div class="tab-title">合格</div>
			 	  	    <div class="tab-content">{{checkedMonthQua}}</div>
			 	  	    <div class="tab-title">不合格</div>
			 	  	    <div class="tab-content-red">{{checkedMonthUnq}}</div>
			 	  </div>
			 </div>
		</div>
		<div class="ci-right">
			 <div class="tab-title">待出库（当日实时）</div> 
			 <div class="tab-content">{{outboundDayCount}}</div>
		</div>
    </div> 
</template>
<script>

export default{
  props:["waitMatTotal","checkedDayQua","checkedDayUnq","checkedMonthQua","checkedMonthUnq","outboundDayCount"],
  data () {
     return{
  
     }
  }
}
</script>

<style scoped>
.count-info{
	width:1920px;
	height:240px;
	box-sizing:border-box;
	padding-right:30px;	
	padding-left:30px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.ci-left,.ci-right{
	width: 480px;
	height:180px;
	border:1px solid #26aab7;
	border-radius:5px;	
    padding-top:26px;
	padding-bottom:37px;
	box-sizing:border-box;
	display: flex;
	justify-content:space-between;
	align-items:center;
	flex-direction: column;
}
.ci-middle{
	width: 840px;
	height:180px;
	border:1px solid #26aab7;
	border-radius:5px;	
    padding-top:26px;
	padding-bottom:37px;
	box-sizing:border-box;
	display: flex;
	justify-content:space-between;
	align-items:center;
}
.haschecked-day,.haschecked-month{
	height:100%;
	width:50%;
	border-right:1px solid #26aab7;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-direction: column;
}
.haschecked-day-group,
.haschecked-month-group{
	width: 80%;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.haschecked-month{
	border:none;
}

.tab-title{
	font-size:30px;
	color:#fff;
}
.tab-content{
	font-size:50px;
	color:#26aab7;
}

.tab-content-red{
	font-size:50px;
	color:red;
}
</style>